<template>
    <div>
        <!--        显示子路由的名字-->
<!--        <router-link to="/hello/xiaoli">xiaoli</router-link>-->
<!--                 路由传递参数 query 刷新也不会消失-->
        <router-link :to="{path:'/hello/xiaoli',query:{name:'xiaoli',age:18}}">xiaoli</router-link>
        |
<!--        <router-link to="/hello/ergou">ergou</router-link>-->
        <!--         路由传递参数 params 传值刷新后 传过去的参数会消失-->
        <router-link :to="{name: 'Ergou',params:{name:'ergou',age:'18'}}">ergou</router-link>
<!--        编程式导航传参内容-->
        <h2>num:{{$route.params.num}}</h2>
        <h2>num:{{$route.params.num2}}</h2>
        <!--        这个是父级的内容-->
        <h1>Hello Vue1</h1>
        <!--        显示子路由的内容-->
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "Hello",
        data() {
            return {
                age:18
            }
        },
        created() {
            // console.log(this.$route)
        },
        //这是在组件里使用的守卫
        beforeRouteEnter(to,from,next){
            console.log(this)//undefined 没有this
            next((vm)=>{//vm 是自定义 这里可以当做this
                // console.log(vm.age) //18
            })
        }
    }
</script>

<style scoped>

</style>